<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <title>regist</title>
</head>
<body>
    <div class="nav">
        <div class="con">
            <div class="left">
            </div>
            <div class="right">
                <div class="listxx">
                    <ul>
                        <li class="hd">首页</li>
                        <li class="hd">书库</li>
                        <li class="hd getl">排行榜</li>
                        <li class="hd getn">作家专区</li>
                        <li class="hd">作家福利</li>
                    </ul>
                </div>
                <div class="list2">
                    <div class="search">
                        <div class="ipt">
                            <input type="text" placeholder="请输入书名或者作者" id="ipt">
                        </div>
                        <div class="searchList">
                            <button class="sr"><i class="iconfont icon-sousuo"></i></button>
                        </div>
                    </div>
                    <div class="lr">
                        <span class="llrr">登录</span>
                        <span class="s">|</span>
                        <span class="llrr">注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="login">
        <div class="login-word">登录
            <span class="close"><a href="javascript:void(0)">关闭</a></span>
        </div>

        <div class="change">注册
            <span class="close"><a href="javascript:void(0)">关闭</a></span>
        </div>

        <div class="user-input">
            <label>用户名/邮箱:</label>
            <input type="text" placeholder="请输入用户名" name="user-name" id="_user-name" class="_input">
        </div>

        <div class="user-input">
            <label>登录密码:</label>
            <input type="text" placeholder="请输入登录密码" name="password" id="_password" class="_input">
        </div>

        <div class="enter" id="login-enter"><a href="javascript:void(0)" id="login-button">登录会员</a></div>

    </div>


    <div class="regist">
        <div class="login-word">注册
            <span class="close"><a href="javascript:void(0)">关闭</a></span>
        </div>

        <div class="user-input">
            <label>用户名/邮箱:</label>
            <input type="text" placeholder="请输入用户名" name="user-name" id="_user-name" class="_input">
        </div>

        <div class="user-input">
            <label>注册密码:</label>
            <input type="text" placeholder="请输入登录密码" name="password" id="_password" class="_input">
        </div>

        <div class="enter" id="login-enter"><a href="javascript:void(0)" id="login-button">登录会员</a></div>

    </div>
    

    <div class="bgc" id="_bgc"></div>


    <script>

        let popupBtn = document.querySelector(".llrr");// popupBtn 是 导航栏 登陆
        let regist = document.querySelector(".regist");// regist 是注册界面

        let change = document.querySelector(".change");// change 是登陆界面的注册
        let closeBtn = document.querySelector(".close")
        let titleBtn = document.querySelector(".login-word");
        let bgc = document.querySelector(".bgc");
        let login = document.querySelector(".login");

        //点击导航栏 登陆   登陆界面显示 模态显示
        popupBtn.addEventListener("click", function () {
            login.style.display = "block";
            bgc.style.display = "block";
        })

        //点击 注册界面
        regist.addEventListener("click", function () {
            login.style.display = "none";
            regist.style.display = "block";
        })

        //点击 登陆界面的注册  登陆界面隐藏  注册界面显示
        change.addEventListener("click", function () {
            login.style.display = "none";
            regist.style.display = "block";
        })


        closeBtn.addEventListener("click", function () {
            login.style.display = 'none';
            bgc.style.display = 'none';
        })

        // document.querySelector(".llrr").onclick=function() {
        //     console.log(66666)
        //     //创建半透明的蒙版层
        //     let modelbox=document.createElement("div")
        //     modelbox.classList.add("modelbox")
        //     document.body.appendChild(modelbox)
            
              
        //     let loginbox=document.createElement("div")
        //     loginbox.classList.add("loginbox")
        //     modelbox.appendChild(loginbox)

        //     let regist=document.createElement("div")
        //     regist.classList.add("regist")
        //     loginbox.appendChild(regist)
        //     regist.innerHTML = "注册"
            
        //     modelbox.appendChild(regist)
        //     var text=document.createElement("div")
		// 	text.className.add("text")
        //     loginbox.appendChild(text)
        //     text.innerHTML = "邮箱"

            // var text=document.createElement("input")
			// text.className="text"
			// text.innerHTML=el.text
			// regist.appendChild(text)

            // let yx=document.insertBefore("div")
            // regist.classList.add("yx")
            // loginbox.append(yx)

            // let mm=document.insertBefore("div")
            // regist.classList.add("mm")
            // loginbox.append(mm)

            // let form=document.createElement("form")
        // }
    </script>
</body>
</html>